<template>
  <div style="height: 100%;">
    <TreeHeader :title="title" :showBtn="showBtn" @treeBtnClick="treeBtnClick"></TreeHeader>
    <div>
      <el-input
        v-model.trim="searchVal"
        placeholder="请输入搜索内容"
        clearable
        prefix-icon="el-icon-search"
        style="margin: 5px 0 10px 0"
      />
    </div>
    <div class="tree-container">
      <el-tree
        ref="tree" 
        :data="deptOptions" 
        :props="defaultProps"
        :expand-on-click-node="false"
        :filter-node-method="filterNode" 
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
  </div>
</template>

<script>
import TreeHeader from "@/components/TreeHeader/index.vue";
export default {
  components: { 
    TreeHeader
  },
  props: {
      deptOptions: {
        type: Array,
        default: function () {
          return []
        }
      },
      title:{
          type: String,
          default: '树形'
      },
      showBtn: {
          type: Boolean,
          default: false
      },
      defaultProps:{
          type: Object,
          default: ()=>{
            return {
              children: 'children',
              label: 'label'
            }
          }
      }
  },

  data() {
      return {
        searchVal: ''
      }
  },
  watch: {
    searchVal(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    handleNodeClick(data) {
      this.$emit('handleNode', data);
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data[this.defaultProps.label].indexOf(value) !== -1;
    },
    treeBtnClick (type) {
        this.$emit("treeBtnClick", type)
    }
  }
}
</script>

<style scoped>
  .tree-container{
    height: calc(100% - 71px);
    overflow: auto;
  }
</style>